<template>
    <div class="app-container">
        <el-form :model="queryParams" inline label-width="90px">
            <el-form-item prop="userName" label="用户名">
                <el-input style="width:240px;" v-model="queryParams.userName" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item prop="name" label="姓名">
                <el-input style="width:240px;" v-model="queryParams.name" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item prop="phone" label="电话">
                <el-input style="width:240px;" v-model="queryParams.phone" placeholder="请输入电话" />
            </el-form-item>
            <el-form-item prop="phone" label="电话">
                <el-button :loading="loading" type="primary" @click="handleQuery">搜索</el-button>
                <el-button :loading="loading" @click="handleReset">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="opt-area mt20 mb20">
            <el-button :loading="loading" type="primary" @click="handleOpenDialog()">添加</el-button>
        </div>
        <el-table :data="dataList" :loading="loading">
            <el-table-column show-overflow-tooltip align="center" prop="name" label="姓名" />
            <el-table-column show-overflow-tooltip align="center" prop="userName" label="用户名" />
            <el-table-column show-overflow-tooltip align="center" prop="phone" label="电话" />
            <el-table-column show-overflow-tooltip align="center" prop="addTime" width="160" label="添加时间" />
            <el-table-column fixed="right" width="160">
                <template #default="{ row }">
                    <div>
                        <el-button type="text" @click="handleOpenDialog(row)">修改</el-button>
                        <el-button type="text" @click="handleDelete(row)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
            @pagination="getList" />
        <AdminInfo ref="adminInfoRef" :getList="getList" />
    </div>
</template>

<script setup name="AdminManage">
import AdminInfo from './dialog/adminInfo';
import { getPageAdmin, deleteAdmin } from '@/api/adminManage';
const { proxy } = getCurrentInstance()
const queryParams = ref({
    pageNo: 1,
    pageSize: 10,
})
const total = ref(0)
const loading = ref(false)
const dataList = ref([])
getList()
function getList() {
    const reqForm = JSON.parse(JSON.stringify(queryParams.value))
    loading.value = true
    getPageAdmin(reqForm).then(res => {
        dataList.value = res.data || []
        total.value = res.totalCount
    }).finally(() => loading.value = false)
}
function handleQuery() {
    queryParams.value.pageNo = 1
    getList()
}
function handleReset() {
    queryParams.value = {
        pageNo: 1,
        pageSize: 10,
    }
    getList()
}

function handleOpenDialog(row) {
    const title = row ? '修改' : '添加'
    proxy.$refs['adminInfoRef'].openDialog({ row, title })
}
// 删除
function handleDelete(row) {
    proxy.$modal.confirm(`请确认是否删除【${row.name}】？`).then(() => {
        const reqForm = { id: row.id }
        deleteAdmin(reqForm).then(() => {
            proxy.$modal.msgSuccess('操作成功！')
            getList()
        })
    })

}
</script>

<style lang="scss" scoped></style>